<template>
  <div class="card table-search" ref="searchRef" v-if="columns?.length">
    <div class="searchForm" ref="formRef">
      <el-form :inline="true" :model="searchParam">
        <template v-if="collapsed">
          <div class="search-items">
            <el-form-item
              v-for="(item, index) in columns"
              :key="item.prop"
              v-bind="getResponsive(item)"
              :index="index"
            >
              <SearchFormItem :column="item" :search-param="searchParam" />
            </el-form-item>
          </div>
        </template>
        <template v-else>
          <el-form-item
            v-for="(item, index) in columns"
            :key="item.prop"
            v-bind="getResponsive(item)"
            :index="index"
          >
            <SearchFormItem :column="item" :search-param="searchParam" />
          </el-form-item>
        </template>
        <div class="operation" :class="!collapsed ? 'open' : ''">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button :icon="Delete" @click="reset">重置</el-button>
          <el-button type="primary" link class="search-isOpen" @click="toggleCollapsed">
            {{ collapsed ? "展开" : "合并" }}
            <el-icon class="el-icon&#45;&#45;right">
              <component :is="collapsed ? ArrowDown : ArrowUp"></component>
            </el-icon>
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts" name="SearchForm">
import {computed, nextTick, onMounted, ref, watch} from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { BreakPoint } from "@/components/Grid/interface";
import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import SearchFormItem from "./components/SearchFormItem.vue";
import { globalStore } from "@/stores/modules/global";
const globalState = globalStore();

interface ProTableProps {
  columns?: ColumnProps[]; // 搜索配置列
  searchParam?: { [key: string]: any }; // 搜索参数
  searchCol: number | Record<BreakPoint, number>;
  search: (params: any) => void; // 搜索方法
  reset: (params: any) => void; // 重置方法
}

// 默认值
withDefaults(defineProps<ProTableProps>(), {
  columns: () => [] as ColumnProps[],
  searchParam: () => ({})
});

// 获取响应式设置
const getResponsive = (item: ColumnProps) => {
  return {
    span: item.search?.span,
    offset: item.search?.offset ?? 0,
    xs: item.search?.xs,
    sm: item.search?.sm,
    md: item.search?.md,
    lg: item.search?.lg,
    xl: item.search?.xl
  };
};

// 配置全局组件大小
const assemblySize = computed(() => globalState.assemblySize);
// 是否默认折叠搜索项
const collapsed = ref(true);
const searchRef = ref();
const formRef = ref();

onMounted(() => {
  if (searchRef.value) {
    const height = assemblySize.value == "default" ? 68 : assemblySize.value == "small" ? 60 : 80;
    searchRef.value.style.height = height + "px";
    searchRef.value.style.overflow = "hidden";
  }
});

watch(() => globalState.assemblySize, () => {
  changeSearchDivHeight();
});

const toggleCollapsed = () => {
  collapsed.value = !collapsed.value;
  changeSearchDivHeight();
}

const changeSearchDivHeight = () => {
  const height = assemblySize.value == "default" ? 68 : assemblySize.value == "small" ? 60 : 80;
  nextTick(() => {
    if (collapsed.value) {
      searchRef.value.style.height = height + "px";
      searchRef.value.style.overflow = "hidden";
    } else {
      const clientHeight = formRef.value?.clientHeight;
      searchRef.value.style.height = (clientHeight ? clientHeight + 18 : height) + "px";
      searchRef.value.style.overflow = "none";
    }
  });
}
</script>
